<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title>简搭云科技有限公司</title>
    <script src="license.js"></script>
    <script src="kylinjson.js"></script>
    <script src="beautifier.min.js"></script>
    <style>
      body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .container {
        width: 8em;
        height: 1em;
        font-size: 35px;
        display: flex;
        justify-content: space-between;
      }

      .container span {
        width: 1em;
        height: 1em;
        --duration: 1.5s;
      }

      .girl {
        animation: slide var(--duration) ease-in-out infinite alternate;
      }

      @keyframes slide {
        from {
          transform: translateX(0);
          filter: brightness(1);
        }

        to {
          transform: translatex(calc(8em - (1em * 1.25)));
          filter: brightness(1.45);
        }
      }

      .boys {
        width: 6em;
        display: flex;
        justify-content: space-between;
      }

      .boys span {
        animation: var(--duration) ease-in-out infinite alternate;
      }

      .boys span:nth-child(1) {
        animation-name: jump-off-1;
      }

      .boys span:nth-child(2) {
        animation-name: jump-off-2;
      }

      .boys span:nth-child(3) {
        animation-name: jump-off-3;
      }

      .boys span:nth-child(4) {
        animation-name: jump-off-4;
      }

      @keyframes jump-off-1 {
        0%,
        15% {
          transform: rotate(0deg);
        }

        35%,
        100% {
          transform-origin: -50% center;
          transform: rotate(-180deg);
        }
      }

      @keyframes jump-off-2 {
        0%,
        30% {
          transform: rotate(0deg);
        }

        50%,
        100% {
          transform-origin: -50% center;
          transform: rotate(-180deg);
        }
      }

      @keyframes jump-off-3 {
        0%,
        45% {
          transform: rotate(0deg);
        }

        65%,
        100% {
          transform-origin: -50% center;
          transform: rotate(-180deg);
        }
      }

      @keyframes jump-off-4 {
        0%,
        60% {
          transform: rotate(0deg);
        }

        80%,
        100% {
          transform-origin: -50% center;
          transform: rotate(-180deg);
        }
      }

      .container span::before {
        content: '';
        position: absolute;
        width: inherit;
        height: inherit;
        border-radius: 15%;
        box-shadow: 0 0 0.1em rgba(0, 0, 0, 0.3);
      }

      .girl::before {
        background-color: hotpink;
      }

      .boys span::before {
        background-color: dodgerblue;
        animation: var(--duration) ease-in-out infinite alternate;
      }

      .boys span:nth-child(1)::before {
        filter: brightness(1);
        animation-name: jump-down-1;
      }

      .boys span:nth-child(2)::before {
        filter: brightness(1.15);
        animation-name: jump-down-2;
      }

      .boys span:nth-child(3)::before {
        filter: brightness(1.3);
        animation-name: jump-down-3;
      }

      .boys span:nth-child(4)::before {
        filter: brightness(1.45);
        animation-name: jump-down-4;
      }

      @keyframes jump-down-1 {
        5% {
          transform: scale(1, 1);
        }

        15% {
          transform-origin: center bottom;
          transform: scale(1.3, 0.7);
        }

        20%,
        25% {
          transform-origin: center bottom;
          transform: scale(0.8, 1.4);
        }

        40% {
          transform-origin: center top;
          transform: scale(1.3, 0.7);
        }

        55%,
        100% {
          transform: scale(1, 1);
        }
      }

      @keyframes jump-down-2 {
        20% {
          transform: scale(1, 1);
        }

        30% {
          transform-origin: center bottom;
          transform: scale(1.3, 0.7);
        }

        35%,
        40% {
          transform-origin: center bottom;
          transform: scale(0.8, 1.4);
        }

        55% {
          transform-origin: center top;
          transform: scale(1.3, 0.7);
        }

        70%,
        100% {
          transform: scale(1, 1);
        }
      }

      @keyframes jump-down-3 {
        35% {
          transform: scale(1, 1);
        }

        45% {
          transform-origin: center bottom;
          transform: scale(1.3, 0.7);
        }

        50%,
        55% {
          transform-origin: center bottom;
          transform: scale(0.8, 1.4);
        }

        70% {
          transform-origin: center top;
          transform: scale(1.3, 0.7);
        }

        85%,
        100% {
          transform: scale(1, 1);
        }
      }

      @keyframes jump-down-4 {
        50% {
          transform: scale(1, 1);
        }

        60% {
          transform-origin: center bottom;
          transform: scale(1.3, 0.7);
        }

        65%,
        70% {
          transform-origin: center bottom;
          transform: scale(0.8, 1.4);
        }

        85% {
          transform-origin: center top;
          transform: scale(1.3, 0.7);
        }

        100%,
        100% {
          transform: scale(1, 1);
        }
      }

      .loadingtitle {
        text-align: center;
        margin-top: 20px;
        color: #494545;
      }
    </style>
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but default doesn't work properly without JavaScript
        enabled. Please enable it to continue.</strong
      >
    </noscript>
    <div id="app">
      <div class="container">
        <span class="girl"></span>
        <div class="boys">
          <span></span><span></span><span></span><span></span>
        </div>
      </div>
      <div class="loadingtitle">资源正在加载中....</div>
    </div>
    <!-- built files will be auto injected -->
  </body>
</html>
